import React from 'react';
import {Row, Col, Modal} from 'antd';
import {Menu, Icon} from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
import {
	Tabs,
	message,
	Form,
	Input,
	Button,
	Checkbox,
	Card,
	notification,
	Upload
} from 'antd';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
import PCHeader from './pc_header';
import PCFooter from './pc_footer';

export default class PCUserCenter extends React.Component {
	constructor(props) {
		super(props);
		this.state={
			usercollection:'',
			usercomments:'',
			previewImage:'',
			previewVisible:false
		};
	};

	componentDidMount() {
		var myFetchOptions={
			method:"GET"
		};

		//用户收藏
		fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getuc&userid="
			+localStorage.userid,myFetchOptions)
		.then(response=>response.json())
		.then(json=>{
			this.setState({usercollection:json});
			console.log(this.state.usercollection);
		});

		//用户评论
		fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getusercomments&userid=" 
			+ localStorage.userid, myFetchOptions)
		.then(response=>response.json())
		.then(json=>{
			this.setState({usercomments:json});
		});



	};

	render() {
		const props={
			action: 'http://newsapi.gugujiankong.com/handler.ashx',
			headers:{
				"Access-Control-Allow-Origin":"*"
			},
			listType:'picture-card',
			defaultFileList: [{
			    uid: 1,
			    name: 'xxx.png',
			    status: 'done',
			    reponse: 'Server Error 500',  // custom error message to show
			    url: 'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png',
			    thumbUrl:'https://os.alipayobjects.com/rmsportal/NDbkJhpzmLxtPhB.png'
			  }],
			onPreview: (file)=>{
				this.setState({previewImage:file.url,previewVisible:true});
			}
		};

		const {usercollection,usercomments} = this.state;
		console.log(usercollection);
		const usercollectionList = usercollection.length ?
		usercollection.map((uc,index)=>(
				<Card key={index} title={uc.uniquekey} extra={<a target="_blank" href={`/#/details/${uc.uniquekey}`}>查看</a>}>
					<p>{uc.Title}</p>
				</Card>
		))
		:
		'您还没有收藏任何的新闻，快去收藏一些新闻吧。';

		const usercommentsList = usercomments.length ?
		usercomments.map((comment,index)=>(
			<Card key={index} title={`于 ${comment.datetime} 评论了文章 ${comment.uniquekey}`} extra={<a target="_blank" href={`/#/details/${comment.uniquekey}`}>查看</a>}>
					<p>{comment.Comments}</p>
				</Card>
		)) : '您还没有发表过任何评论.';

		return (
			<div>
			<PCHeader/>
				<Row>
					<Col span={2}></Col>
					<Col span={20}>
					<Tabs>
					<TabPane tab="我的收藏列表" key="1">
						<div class="comment">
							<Row>
								<Col span={24}>
									{usercollectionList}
								</Col>
							</Row>
						</div>
					</TabPane>
					<TabPane tab="我的评论列表" key="2">
						<div class="comment">
							<Row>
								<Col span={24}>
									{usercommentsList}
								</Col>
							</Row>
						</div>
					</TabPane>
					<TabPane tab="头像设置" key="3">
						<div class="clearfix">
							<Upload {...props}>
								<Icon type="plus"/>
								<div className="ant-upload-text">上传照片</div>
							</Upload>
							<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
								<img alt="预览" src={this.state.previewImage}/>
							</Modal>
						</div>
					</TabPane>
					</Tabs>
					</Col>
					<Col span={2}></Col>
				</Row>
			<PCFooter/>
			</div>
		)
	}
}